<template>
    <div class="container">
        <!-- bootstrap的类型 -->
        <div class="row">
            <div class="col-12 col-sm-8 col-md-6 col-lg-10 m-auto pt-5" style="height: 500px;">
                <div class="card mt-10  bg-blue">
                    <div class="card-header">
                        <h4 class="text-center mb-0">{{ $conf.logo }}</h4>
                    </div>
                    <div class="card-body">
                        <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
                            <el-form-item prop="username">
                                <el-input v-model="ruleForm.username" size="medium" placeholder="请输入用户名"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码"></el-input>
                            </el-form-item>
                            <el-button type="primary" class="w-100" size="medium" @click="submit"
                                :loading='loading'>{{ loading ? '登录中...' : '立即登录' }}</el-button>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    name: 'LoginPage',
    data() {
        return {
            loading: false,
            ruleForm: {
                username: "",
                password: "",
            },
            // 表单验证
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ]
            },
        }
    },
    computed:{
        ...mapGetters('menu', [
            'adminIndex'
        ])
    },
    methods: {
        submit() {
            this.$refs.ruleForm.validate((e) => {
                if (!e) return;
                // 提交表单
                this.loading = true;
                // 发送请求
                this.$axios.post('/admin/login', this.ruleForm).then((response) => {
                    // console.log('登录响应数据：', response);
                    let data = response.data;
                    
                    // 存储到vuex
                    this.$store.commit('user/login', data.data);

                    // 存储权限规则
                    if (data.data.role && data.data.role.rules) {
                        // 将权限规则转换为路由名称格式
                        const permissions = data.data.role.rules.map(rule => {
                            if (rule.desc) {
                                // 将下划线替换为连字符，并确保格式与路由配置匹配
                                return rule.desc.replace(/_/g, '-');
                            }
                            return null;
                        }).filter(Boolean);
                        
                        //console.log('处理后的权限列表：', permissions);
                        window.sessionStorage.setItem('permissions', JSON.stringify(permissions));
                    }

                    // 生成后台菜单
                    if (data.data.tree) {
                        this.$store.commit('menu/createNavBar', data.data.tree);
                    } else {
                        console.warn('未收到菜单数据');
                    }

                    // 成功提示
                    this.$message.success('登录成功',2000);
                    this.loading = false;
                    
                    // 跳转后台首页
                    // console.log('准备跳转到：', this.adminIndex);
                    // this.$router.push({ name: 'BackendIndex' });
                    this.$router.push('/');
                }).catch((error) => {
                    console.error('登录错误：', error);
                    this.loading = false;
                    // 错误提示
                    this.$message.error(error.response?.data?.meta?.msg || '登录失败，请稍后重试');
                });
            });
        }
    }
}
</script>

<style scoped>
form div {
    margin-bottom: 15px;
}
</style>